html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    
#Slide1{
	background: url(../img/灯泡.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#Slide1 a{
	position: absolute;
	display: block;
	padding: 10px 30px;
	border: 2px solid #00aeff;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 4px;
	color: #00AEFF;
	text-decoration: none;
	overflow: hidden;
	margin-left: -450px;
}
#Slide1 a span{
	position: relative;
	z-index: 1;
	transform: 1s;
}
#Slide1 a:hover span{
	color: #fff;
}
#Slide1 a .liquid{
	position: absolute;
	top:calc(100% + 20px);
	left: 0;
	width: 100%;
	height: 100%;
	background: #00AEFF;
	transition: 1s;
}
#Slide1 a:hover .liquid{
	top: 0;
}
#Slide1 a .liquid:before{
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 22px;
	background: url(../img/liquid.png);
	-o-background: url(../img/liquid.png);
	-ms-background: url(../img/liquid.png);
	-moz-background: url(../img/liquid.png);
	-webkit-background: url(../img/liquid.png);
	animation:  animate 0.5s linear infinite;
}

#Slide2{
	background: url(../img/地球1.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#Slide2 a{
	position: absolute;
	display: block;
	padding: 10px 30px;
	border: 2px solid #00aeff;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 4px;
	color: #00AEFF;
	text-decoration: none;
	overflow: hidden;
	margin-left: 450px;
	margin-top: 160px;
}
#Slide2 a span{
	position: relative;
	z-index: 1;
	transform: 1s;
}
#Slide2 a:hover span{
	color: #fff;
}
#Slide2 a .liquid{
	position: absolute;
	top:calc(100% + 20px);
	left: 0;
	width: 100%;
	height: 100%;
	background: #00AEFF;
	transition: 1s;
}
#Slide2 a:hover .liquid{
	top: 0;
}
#Slide2 a .liquid:before{
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 22px;
	background: url(../img/liquid.png);
	background: url(../img/liquid.png);
	-o-background: url(../img/liquid.png);
	-ms-background: url(../img/liquid.png);
	-moz-background: url(../img/liquid.png);
	-webkit-background: url(../img/liquid.png);
	animation:  animate 0.5s linear infinite;
}

#Slide3{
	background: url(../img/人工智能.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#Slide3 a{
	position: absolute;
	display: block;
	padding: 10px 30px;
	border: 2px solid #00aeff;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 4px;
	color: #00AEFF;
	text-decoration: none;
	overflow: hidden;
	margin-left: -450px;
	margin-top: 140px;
}
#Slide3 a span{
	position: relative;
	z-index: 1;
	transform: 1s;
}
#Slide3 a:hover span{
	color: #fff;
}
#Slide3 a .liquid{
	position: absolute;
	top:calc(100% + 20px);
	left: 0;
	width: 100%;
	height: 100%;
	background: #00AEFF;
	transition: 1s;
}
#Slide3 a:hover .liquid{
	top: 0;
}
#Slide3 a .liquid:before{
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 22px;
	background: url(../img/liquid.png);
	background: url(../img/liquid.png);
	-o-background: url(../img/liquid.png);
	-ms-background: url(../img/liquid.png);
	-moz-background: url(../img/liquid.png);
	-webkit-background: url(../img/liquid.png);
	animation:  animate 0.5s linear infinite;
}


#Slide4{
	background: url(../img/进入校园网.png);
	background-size: cover;
	background-repeat: no-repeat;
}
#Slide4 a{
	position: absolute;
	display: block;
	padding: 10px 30px;
	border: 2px solid #00aeff;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 4px;
	color: #00AEFF;
	text-decoration: none;
	overflow: hidden;
	margin-left: 140px;
	margin-top: 60px;
}
#Slide4 a span{
	position: relative;
	z-index: 1;
	transform: 1s;
}
#Slide4 a:hover span{
	color: #fff;
}
#Slide4 a .liquid{
	position: absolute;
	top:calc(100% + 20px);
	left: 0;
	width: 100%;
	height: 100%;
	background: #00AEFF;
	transition: 1s;
}
#Slide4 a:hover .liquid{
	top: 0;
}
#Slide4 a .liquid:before{
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: 100%;
	height: 22px;
	background: url(../img/liquid.png);
	background: url(../img/liquid.png);
	-o-background: url(../img/liquid.png);
	-ms-background: url(../img/liquid.png);
	-moz-background: url(../img/liquid.png);
	-webkit-background: url(../img/liquid.png);
	animation:  animate 0.5s linear infinite;
}

@keyframes animate{
	0%{
		background-position-x:0 ;
	}
	100%{
		background-position-x:118px;
	}
}

